<template>
  <div class="page-main">
    <query-page
      v-model:selectedKeys="selectedKeys"
      title="货源供应商信息定义"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="formRenderKeys"
      :table-component-config="tableComponentConfig"
      :table-render-config="mainform4"
      :table-render-keys="mainform4Keys"
      :loading="isLoading"
      :data="renderData"
      :total="totalNum1"
      height="calc(100vh - 160px)"
      @query-data="getData"
    >
      <template #operate="row">
        <a-button type="text" @click="detailsList(row)">详情</a-button>
      </template>
    </query-page>
    <detailsModal v-if="showModal" :detalis-id="detalisId" @close="closeModal">
    </detailsModal>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineAsyncComponent } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import {
    formRenderConfig,
    formRenderKeys,
    formComponentConfig,
  } from '@/views/basic-configuration/definitionsuppliers/definition-from';
  import {
    mainform4,
    mainform4Keys,
    tableComponentConfig,
  } from '@/views/basic-configuration/definitionsuppliers/suppliercolumns';
  import useModal from '@/common/hooks/modal';
  import { selectSourceOfGoodsPage } from '@/api/supplier/quotation-information';

  const detailsModal = defineAsyncComponent(
    () =>
      import(
        '@/views/basic-configuration/components/definition-suppliers-content.vue'
      )
  );

  const { showModal, openModal, closeModal } = useModal();
  const isLoading = ref(false);

  const totalNum1 = ref(0);
  const selectedKeys = ref<string[]>([]);
  const renderData = ref([]);
  const renderData2 = ref([]);
  const getData = async (queryInfo?: object) => {
    renderData.value = [];
    renderData2.value = [];
    isLoading.value = true;
    const { data } = await selectSourceOfGoodsPage(queryInfo);
    isLoading.value = false;
    totalNum1.value = data.total;
    renderData.value = data.list;
  };
  // 子表
  // 详情
  const detalisId = ref();
  const detailsList = (row: any) => {
    detalisId.value = row.record;
    openModal();
  };
</script>
